<template>
  <section>
    <el-container>
      <el-header>
        <examinationInfoSearch :search="search" :filters="filters" :add="add" :killSelection="killSelection"/>
      </el-header>
      <el-main>
        <el-table :data="sheet.rows" highlight-current-row v-loading="sheet.loading" stripe="stripe" border="border"  ref="multipleTable"
                  @sort-change="sortChange" style="width: 100%;" max-height="690">
            <el-table-column type="selection" width="55"/>

<el-table-column prop="name" label="名称" min-width="150" sortable="sortable" :show-overflow-tooltip="true" header-align="center"/>

<el-table-column prop="startTime" label="开始时间" width="200" align="center" sortable="sortable" 
:show-overflow-tooltip="true">
<template slot-scope="scope">
<el-icon name="time"></el-icon>
<span style="margin-left: 10px">{{ formatDate(scope.row.startTime) }}</span>
</template>
</el-table-column>

<el-table-column prop="endTime" label="结束时间" width="200" align="center" sortable="sortable" 
:show-overflow-tooltip="true">
<template slot-scope="scope">
<el-icon name="time"></el-icon>
<span style="margin-left: 10px">{{ formatDate(scope.row.endTime) }}</span>
</template>
</el-table-column>

<el-table-column prop="paperId" label="试卷ID" min-width="150" sortable="sortable" :show-overflow-tooltip="true" header-align="center"/>

<el-table-column prop="paperName" label="试卷名称" min-width="150" sortable="sortable" :show-overflow-tooltip="true" header-align="center"/>

<el-table-column prop="timeCount" label="考试时长" min-width="150" sortable="sortable" :show-overflow-tooltip="true" header-align="center"/>

<el-table-column prop="questionCount" label="题量" min-width="150" sortable="sortable" :show-overflow-tooltip="true" header-align="center"/>

<el-table-column prop="gradeCount" label="总分" min-width="150" sortable="sortable" :show-overflow-tooltip="true" header-align="center"/>

<el-table-column prop="userCount" label="学生总数" min-width="150" sortable="sortable" :show-overflow-tooltip="true" header-align="center"/>

<el-table-column prop = "examinationType" label = "考试类型" width = "120" align = "center" >
  <template slot-scope = "scope" >
    <el-tag :type = "['','success','info','warning','danger'][['0','1'].indexOf(scope.row.examinationType+ '')%5]" > {{['开卷','闭卷'][['0','1'].indexOf(scope.row.examinationType+ '')]}} </el-tag>
  </template >
</el-table-column>

<el-table-column prop = "examinationStatus" label = "考试状态" width = "120" align = "center" >
  <template slot-scope = "scope" >
    <el-tag :type = "['','success','info','warning','danger'][['0','1','2'].indexOf(scope.row.examinationStatus+ '')%5]" > {{['待进行','已结束','考试中'][['0','1','2'].indexOf(scope.row.examinationStatus+ '')]}} </el-tag>
  </template >
</el-table-column>

<el-table-column prop="userId" label="老师ID" min-width="150" sortable="sortable" :show-overflow-tooltip="true" header-align="center"/>

<el-table-column prop="nickName" label="老师昵称" min-width="150" sortable="sortable" :show-overflow-tooltip="true" header-align="center"/>

<el-table-column prop = "isRelease" label = "发布" width = "120" align = "center" >
  <template slot-scope = "scope" >
    <el-tag :type = "['','success','info','warning','danger'][['0','1'].indexOf(scope.row.isRelease+ '')%5]" > {{['否','是'][['0','1'].indexOf(scope.row.isRelease+ '')]}} </el-tag>
  </template >
</el-table-column>

<el-table-column prop="remark" label="备注" min-width="150" sortable="sortable" :show-overflow-tooltip="true" header-align="center"/>

<el-table-column prop="schoolId" label="学校ID" min-width="150" sortable="sortable" :show-overflow-tooltip="true" header-align="center"/>

<el-table-column prop = "isEnable" label = "状态" width = "120" align = "center" >
  <template slot-scope = "scope" >
    <el-tag :type = "['','success','info','warning','danger'][['0','1'].indexOf(scope.row.isEnable+ '')%5]" > {{['禁用','启用'][['0','1'].indexOf(scope.row.isEnable+ '')]}} </el-tag>
  </template >
</el-table-column>

          <el-table-column prop="createTime" label="时间" width="200" align="center" sortable="sortable"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-icon name="time"></el-icon>
              <span style="margin-left: 10px">{{ $formatDate(scope.row.createTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="120" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-dropdown @command="handleCommand">
           <span class="el-dropdown-link">
              <el-button size="small" type="text">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="{'method':'showExaminationInfo','args':scope.row}">编辑</el-dropdown-item>
                  <el-dropdown-item :command="{'method':'killExaminationInfo','args':scope.row.id}">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <lsz-pagination :getList="getList" :sheet="sheet"/>
    </el-container>

    <ExaminationInfoEdit ref="examinationInfoEdit" :search="search"/>
  </section>
</template>

<script>
  import LszPagination from '@/components/common/lsz-pagination.vue';
  import ExaminationInfoSearch from './ExaminationInfoSearch.vue';
  import ExaminationInfoEdit from './ExaminationInfoEdit.vue';

  let data = () => {
    return {
      filters: {},
      sheet: {
        rows: [],
        total: 0,
        pageNum: 1,
        pageSize: 20,
        sort: 'createTime',
        order:'desc',
        loading: false
      },
    }
  }
  let getList = function () {
    let param = {
      pageNum: this.sheet.pageNum,
      pageSize: this.sheet.pageSize,
      sort: this.sheet.sort,
      order: this.sheet.order,
      query: this.filters
    }
    this.sheet.loading = true
    this.$http.post('/examinationInfoController/getExaminationInfoList', param).then(res => {
        if (!res.data.success) {
            vm.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error'
            });
            return
        }
      let response = res.data.data;

      this.sheet.total = response.total
      this.sheet.rows = response.content
      this.sheet.loading = false
    }).catch(() => this.sheet.loading = false)
  }

  export default {
    data: data,
    components: {
      LszPagination,
      ExaminationInfoSearch,
      ExaminationInfoEdit,
    },
    methods: {
      search: function () {
        this.sheet.pageNum = 1
        this.getList()
      },
      handleCommand: function (param) {
        this[param.method](param.args)
      },
      killSelection: function () {
            let rows = this.$refs.multipleTable.store.states.selection;
            if (rows && rows.length > 0) {
                let arr = [];
                for (let row of rows) {
                    arr.push(row.id);
                }
                this.killExaminationInfo(arr.join(","));
            }
        },
      killExaminationInfo: function (id) {
        let vm = this;
        vm.$confirm('是否确认提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          vm.$http.post('/examinationInfoController/deleteExaminationInfo' , {id:id}).then(res => {
            if (!res.data.success) {
              vm.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error'
              });
              return
            }
            vm.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.search();
          })
        }).catch(() => {

        })
      },
      showExaminationInfo: function (row) {
        this.$refs.examinationInfoEdit.show(row);
      },
      add: function () {
        this.$refs.examinationInfoEdit.showAdd();
      },
      getList,
      sortChange: function (d) {
        this.sheet.sort = d && d.prop
        this.sheet.order = d && d.order && d.order.indexOf('asc') >= 0 ? 'ASC' : 'DESC'
        this.search()
      },
    },
    mounted: function () {
      this.search()
    },
    name: "ExaminationInfoApp"
  }
</script>

<style scoped>
</style>

